/**
* @description : 标杆品牌销售情况
* @descriptionDetail : 标杆品牌销售情况
* @copyright : 辽宁烟草
* @author : mc
* @create : 2023-12-14 15:33:20
*/
<template>
  <view>
    <!-- #ifdef H5-ONLY -->
    <theme-navbar
        :is-white="false"
        :title="navTitle"
        :custom-back="goBack"
        style="z-index: 99999"
    >
      <!-- <view class="nav-right-icon">
        <u-icon name="scan" color="#FFF" @tap="scan"></u-icon>
      </view> -->
    </theme-navbar>
    <!-- #endif -->
    <view class="content u-page">
      <!-- 内容区 -->
      <!-- <view class="nolicence-search-lay" :style="{'top': isHideNav ? 0 : '44px'}">
				<view style="padding:10px 0;">
					<u-section title="品规-价格类" :right="false" line-color font-size="28"></u-section>
				</view>
			</view> -->
      <view class="main">
        <view class="model-class ">
          <view style="padding: 10px 10px">
            <u-section
                title="签到"
                :right="false"
                line-color="#2979ff"
                font-size="28"
            ></u-section>
          </view>
        </view>
        <view class="model-class padBot10">
          <p class="title-name"  @click="signInClick" style="color:#0070D2">
            签到
          </p>
        </view>
        <view class="model-class ">
          <view style="padding: 10px 10px">
            <u-section
                title="品规-价格类"
                :right="false"
                line-color="#2979ff"
                font-size="28"
            ></u-section>
          </view>
        </view>
        <view class="model-class padBot10">
          <p class="title-name">
            南京
          </p>
          <u-row gutter="15" type="flex" justify="center" align="middle">
            <u-radio-group v-model="selectedBrand[0]" @change="changeSwitch(0)">
              <u-radio shape="circle" :name="item.checkIt" v-for="item in NJdata" :key="item.checkIt">
                {{ item.priceType }}
              </u-radio>
            </u-radio-group>
          </u-row>
          <p class="title-name">
            中华
          </p>
          <u-row gutter="15" type="flex" justify="center" align="middle">
            <u-radio-group v-model="selectedBrand[1]" @change="changeSwitch(1)">
              <u-radio shape="circle" :name="item.checkIt" v-for="item in ZHdata" :key="item.checkIt">
                {{ item.priceType }}
              </u-radio>
            </u-radio-group>
          </u-row>
          <p class="title-name">
            大会堂
          </p>
          <u-row gutter="15" type="flex" justify="center" align="middle">
            <u-radio-group v-model="selectedBrand[2]" @change="changeSwitch(2)">
              <u-radio shape="circle" :name="item.checkIt" v-for="item in DHTdata" :key="item.checkIt">
                {{ item.priceType }}
              </u-radio>
            </u-radio-group>
          </u-row>
        </view>
        <view class="model-class">
          <view style="padding: 10px 10px">
            <u-section
                title="品规-存销比"
                :right="false"
                line-color="#2979ff"
                font-size="28"
            ></u-section>
          </view>
        </view>
        <view class="model-class padBot10">
          <p class="title-name ">
            南京雨花石
          </p>
          <u-row gutter="12" type="flex" justify="center" align="middle">
            <u-radio-group v-model="selectedBrand[3]" @change="changeSwitch(3)">
              <u-radio shape="circle" :name="item.checkIt" v-for="item in YHSdata" :key="item.checkIt">
                {{ item.priceType }}
              </u-radio>
            </u-radio-group>
          </u-row>
          <p class="title-name">
            中华双中支
          </p>
          <u-row gutter="12" type="flex" justify="center" align="middle">
            <u-radio-group v-model="selectedBrand[4]" @change="changeSwitch(4)">
              <u-radio shape="circle" :name="item.checkIt" v-for="item in SZZdata" :key="item.checkIt">
                {{ item.priceType }}
              </u-radio>
            </u-radio-group>
          </u-row>
        </view>
        <view class="model-class ">
          <view style="padding: 10px 10px">
            <p class="title-name">
              违规销售情况
            </p>
            <u-row gutter="12" type="flex" justify="center" align="middle">
              <u-radio-group v-model="selectedBrand[5]" @change="changeSwitch(5)">
                <u-radio shape="circle" :name="item.checkIt" v-for="item in WGXSdata" :key="item.checkIt">
                  {{ item.priceType }}
                </u-radio>
              </u-radio-group>
            </u-row>
          </view>
        </view>
        <view class="model-class ">
          <view style="padding: 10px 10px">
            <view class="his-kc" @click="hisClick">
              <span>历史库存</span>
            </view>
            <p class="title-name">
              库存情况
            </p>
            <u-row gutter="12" type="flex" justify="center" align="middle">
              库存<u-number-box v-model="storageAmt" :step="1" :min="0" decimal-length="1"></u-number-box>条
            </u-row>
          </view>
        </view>
        <view style="padding:20px; margin:0 30px;">
          <u-button type="primary" shape="circle" @click="saveClick">保存</u-button>
        </view>
      </view>
    </view>
      <u-popup v-model="showHis" mode="bottom">
        <view class="his-area">
          <p class="his-title">历史库存</p>
          <view class="his-content">
            <view class="item" v-for="(item, index) of hisList" :key="'item-'+index">
              <view class="row">
                <text>走访人</text>
                <text>{{ item.userName || '' }}</text>
              </view>
              <view class="row">
                <text>走访时间</text>
                <text>{{ item.date || '' }}</text>
              </view>
              <view class="row">
                <text>库存</text>
                <text>{{ item.storageAmt || item.storageAmt == 0 ? (item.storageAmt + '条') : '' }}</text>
              </view>
            </view>
          </view>
        </view>
      </u-popup>
  </view>
</template>

<script>
import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
import commonService from "@/service/score/score.service.js";
import checkService from "@/service/check/check.service";
	import {
		isDD,
		isWorkWechat,
    isEmpApp
	} from '@/common/util';
	import {
		SET_MAP_LAT_LON
	} from '@/config/setting.config.js';

export default {
  components: {},
  mixins: [MescrollMoreMixin],
  data() {
    return {
      allData: [],
      NJdata: [],
      ZHdata: [],
      DHTdata: [],
      YHSdata: [],
      SZZdata: [],
      WGXSdata: [],
      checked: false,
      parameterData: '',
      selectedBrand: [],
      storageAmt: 0, // 库存数量
      showHis: false, // 显示历史库存
      hisList:[], // 历史库存
      visitSuccessBean: '', // 签到成功后的bean
				longitude: 0, // 经度
				latitude: 0, // 纬度
    };
  },
  created() {
    this.loadData();
  },
  mounted() {
    this.getLocation();
  },
  onLoad() {
    // document.addEventListener( "keydown", this.keypress );
    this.parameterData = this.getRouteParam();
    console.log(this.parameterData)
  },
  onUnload() {
    console.log("onUnload");
  },
  methods: {
    signInClick(){
      if (this.visitSuccessBean) {
        return this.$u.toast('请勿重复签到')
      }
      let isHaveLngLat = false;
      if (this.longitude == 0 && this.latitude == 0) {
        this.$modal.alert('获取当前位置信息失败,请稍后重新签到？', () => {
          this.getLocation();
        });
        return;
      }
      let params = {
        longitude: '',
        latitude: '',
        retailerUuid: '',
        deviateDistance: '',
        taskSubject: ''
      }
      this.$u.loading('正在计算当前位置...');
      checkService.retailerDetail({
        retailerUuid: this.parameterData.retailerUuid
        }).then((dr) => {
        if (dr.success) {
          let retailerInfo = dr.bean // 存储零售户信息
          params.longitude = this.longitude;
          params.latitude = this.latitude;
          params.retailerUuid = this.parameterData.retailerUuid
          params.taskSubject = this.parameterData.licNo ? '01' : '02'
          // 计算签到距离
          if (retailerInfo.longitude && retailerInfo.latitude) {
            isHaveLngLat = true;
            let p1 = new AMap.LngLat(retailerInfo.longitude, retailerInfo.latitude);
            let p2 = new AMap.LngLat(params.longitude, params.latitude);
            params.deviateDistance = Math.round(p1.distance(p2));
            console.log('两点相距=' + params.deviateDistance);
          } else {
            // 没有坐标默认偏离
            params.deviateDistance = 996996996;
          }
          checkService.signBrandResult(params).then((drr) => {
            if (drr.success) {
              this.$u.toast('签到成功');
              this.visitSuccessBean = drr.bean
              this.$u.hideLoading();
            } else {
              this.$u.toast('签到异常');
              this.visitSuccessBean = ''
              this.$u.hideLoading();
            }
          })
          .catch((err) => {
            this.$u.hideLoading();
            this.$u.toast(err);
          });
        } else {
          this.$u.toast('零售户获取异常');
          this.$u.hideLoading();
        }
      })
      .catch((err) => {
        this.$u.hideLoading();
        this.$u.toast(err);
      });
    },
			// 定位
			getLocation() {
				if (isDD() || isWorkWechat() || isEmpApp()) {
					this.$deviceApi.geolocation().then((geo) => {
						this.longitude = geo.longitude;
						this.latitude = geo.latitude;
					});
				} else {
					this.longitude = SET_MAP_LAT_LON[0];
					this.latitude = SET_MAP_LAT_LON[1];
				}
			},
    hisClick(){
      commonService.getBrandDetail(1, 3, {
        retailerUuid: this.retailerUuid,
      }).then(res => {
        if (res.success) {
          this.hisList = res.data
          this.showHis = true
        } else {
          this.$modal.alert("请求失败");
        }
      })
    },
    changeSwitch(e) {
      console.log(e)
      console.log(this.selectedBrand)
    },
    loadData() {
      let self = this;
      commonService.getBrandPriceInfo().then((res) => {
        if (res.success) {
          this.allData = res.bean
          res.bean.forEach((item, index) => {
            if (item.brandName == '南京') {
              this.NJdata.push(item)
            }
            if (item.brandName == '中华') {
              this.ZHdata.push(item)
            }
            if (item.brandName == '大会堂') {
              this.DHTdata.push(item)
            }
            if (item.brandName == '南京雨花石') {
              this.YHSdata.push(item)
            }
            if (item.brandName == '中华双中支') {
              this.SZZdata.push(item)
            }
            if (item.brandName == '违规销售情况') {
              this.WGXSdata.push(item)
            }
          });
          console.log(this.allData);
        } else {
          self.$modal.alert(res.msg);
        }
      })
          .catch((err) => {
            self.$modal.alert("请求失败");
          });
    },

    saveClick() {
      if (!this.visitSuccessBean) {
        return this.$u.toast('请先签到！')
      }
      const brandList = this.selectedBrand;
      console.log(brandList)
      commonService.postJsonSaveInfo({
        brandList: brandList.filter(item => item),
        // retailerUuid: '0000010',
        retailerUuid: this.parameterData.retailerUuid,
        storageAmt: this.storageAmt,
        recordUuid: this.visitSuccessBean.recordUuid
      }).then(res => {
        if (res.success) {
          this.$modal.alert('提交成功', () => {
            this.backPrev({
              paramKey: 'refreshBack',
              param: true,
            });
          });
        } else {
          this.$modal.alert(res.msg);
        }
      }).catch(err => {
        this.$modal.alert("请求失败");
      })
    },

  },
};
</script>

<style lang="scss" scoped>
@import "@/style/common/rightMenu.scss";

.nolicence-search-lay {
  background-color: #fff;
  position: fixed;
  // #ifndef H5-DINGDING
  top: 44px;
  // #endif
  // #ifdef H5-DINGDING
  top: 0px;
  // #endif
  z-index: 999;
  width: 100%;
  overflow: hidden;
}

.main {
  background-color: $uni-bg-color-grey;
  padding-top: 5px;
  height: 93vh;
  font-size: 14px;
  font-weight: 700;
}

.dataTab {
  width: 730rpx;
  margin-left: 10rpx;
}

.scoreA {
  padding: 5px 15px;
  background: #fff;
  margin-bottom: 10px;
}

.scoreB {
  padding: 5px 0 10px;
  margin-bottom: 10px;
  border-bottom: 1px dashed #666;
}

.model-class {
  margin-bottom: 10px;
  width: 100%;
  background: #fff;
}

.title-name {
  width: 30%;
  margin: 10px auto;
  text-align: center;
  height: 30px;
  border-bottom: 3px #909399 solid;
  position:relative;

}
.his-kc{
    position:absolute;
    left:0;
    margin-top:10px;
    padding-left:20px;
    height:20px;
    span{
      color:#0070D2;
    }
  }

.padBot10 {
  padding: 1px 10px 10px;
}
.his-area{
  position:relative;
  .his-title{
    padding:0 15px;
    height:25px;
    font-size:14px;
    line-height:25px;
    border-bottom:1px solid #909399;
      color:#0070D2;
  }
  .his-content{
    .item{
      width:100%;
      border-top:1px solid #909399;
      .row{
        padding:0 15px;
        height:25px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
    .item:first-child{
      border-top:0;
    }
  }
}
</style>
